<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="icon" type="image/x-icon" href="/image/favicon.ico">
    <link href="/css/music.css" rel="stylesheet">
    <link href="/css/iconfont.css" rel="stylesheet">
    <link href="/css/jquery.pagination.css" rel="stylesheet">
    <script src="/js/jquery.pagination.min.js" type="text/javascript"></script>
    <style>
        body{
            background-size:100% 100%;
            color: #e9e9e9;
        }
    </style>
    <title>音乐页面</title>
</head>
<body>
<canvas id="canvas"></canvas>
<div>
<header>
    <div id="header">
        <form class="form" action="/musicSearch" method="get">
            <input name="key" class="input_key" id="input_key" maxlength="100" type="text">
            <input type="submit" required="required" value="哦!再查一个!">

        </form>
    </div>
</header>
<!--/*@thymesVar id="name" type="com.dsmusic.musicpro.controller.HomepageController"*/-->
<div id="title"><span>查询到的有关"[[${name}]]"音乐如下</span></div>
<div class="container-fluid">
    <div class="row">
        <div class="col-2">图片</div>
        <div class="col-2">歌曲名</div>
        <div class="col-2">歌手</div>
        <div class="col-2">时长</div>
        <div class="col-1">点赞收藏^v^</div>
        <div class="col-1">其他操作</div>
        <div class="col-2">播放器</div>
    </div>
    <div id="preloader_1" style="display: none;">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <div>
            <span>稍</span>
            <span>等</span>
            <span>一</span>
            <span>下</span>
            <span>，</span>
            <span>音</span>
            <span>乐</span>
            <span>正</span>
            <span>火</span>
            <span>速</span>
            <span>赶</span>
            <span>来</span>
        </div>>

    </div>
    <!--/*@thymesVar id="musics" type="com.dsmusic.musicpro.pojo.Music"*/-->
    <div class="row musics-row" th:each="music:${musics}">
        <div class="col-2"><img height="40px" th:src="${music.pic120}" width="40px"></div>
        <div class="col-2 m" th:text="${music.name}" ></div>
        <div class="col-2" th:text="${music.artist}"></div>
        <div class="col-2" th:text="${music.songTimeMinutes}"></div>
        <div class="col-1"><a id="zan" href="javascript:void(0);" onclick="ds1(this)"><i  class="iconfont icon-buoumaotubiao16
"></i>&nbsp;</a>|&nbsp;<a id="sc" href="javascript:void(0);" onclick="ds2(this)"><i class="iconfont icon-shoucang"></i></a></div>
        <div class="col-1"><a th:href="@{'/Details?rid='+${music.rid}}"><i class="iconfont icon-hanhan-01-01"></i>详情</a></div>
        <div class="col-2">
            <audio controls="controls" th:src="${music.url}"></audio>
        </div>
    </div>
</div>
<footer>
    <div class="box">
        <div class="page fl" id="pagination2"></div>
        <div class="info fl">
            <p>当前页数：<span id="current2">1</span></p>
        </div>
    </div>
</footer>
</div>
<script src="/js/music.js"></script>
<script>
    /* 当前页面信息 */
    let currentPage_value = 0;
    let key = "[[${name}]]";
    /* 鼠标特效 */
    var a_idx = 0;
    jQuery(document).ready(function ($) {
        $("body").click(function (e) {
            var a = "听歌呀!";
            var $i = $("<span></span>").text(a);
            var x = e.pageX,
                y = e.pageY;
            $i.css({
                "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "color": "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
            });
            $("body").append($i);
            $i.animate({
                    "top": y - 180,
                    "opacity": 0
                },
                1500,
                function () {
                    $i.remove();
                });
        });
    });

    //点击分页选项进行数据分页处理
    $(function () {
        $("#pagination2").pagination({
            currentPage: 1,
            totalPage: 10,
            isShow: false,
            count: 3,
            prevPageText: "< 上一页",
            nextPageText: "下一页 >",
            callback: function (current) {
                currentPage_value = current
                $("#current2").text(current)
                $(".musics-row").remove();
                $("#preloader_1").removeAttr("style");
                $.ajax({
                    url:"/musicSearch2",
                    data:{"key": key, "page": currentPage_value},
                    success:function (data) {
                    console.log(data)
                    data.forEach(i=>{$(".container-fluid").append(`
                    <div class="row musics-row">
                        <div class="col-2"><img height="40px" src="` +i['pic120']+ `" width="40px"></div>
                    <div class="col-2 m">`+i['name']+`</div>
                    <div class="col-2">`+i['artist']+`</div>
                    <div class="col-2">`+i['songTimeMinutes']+`</div>
                    <div class="col-1"><a id="zan" href="javascript:void(0);" onclick="ds1(this)"><i class="iconfont icon-buoumaotubiao16
"></i></a>&nbsp;|&nbsp;<a id="sc" href="javascript:void(0);" onclick="ds2(this)"><i class="iconfont icon-shoucang"></i></a></div>
                    <div class="col-1"><a href="/Details?rid=`+i['rid']+`"><i class="iconfont icon-hanhan-01-01"></i>详情</a></div>
                            <div class="col-2">
                                <audio controls="controls" src="`+i["url"]+`"></audio>
                            </div>
                        </div>`);});
                    $("#preloader_1").attr("style","display:none;")
                },error:function (data) {
                        alert("请求失败,请刷新页面")
                    }})
            }
        });
    });



</script>
<script>


    // 可调参数
    var BACKGROUND_COLOR = "rgba(0,43,54,1)";   // 背景颜色
    var POINT_NUM = 100;                        // 星星数目
    var POINT_COLOR = "rgba(255,255,255,0.7)";  // 点的颜色
    var LINE_LENGTH = 10000;                    // 点之间连线长度(的平方)

    // 创建背景画布
    var cvs = document.createElement("canvas");
    cvs.width = window.innerWidth;
    cvs.height = window.innerHeight;
    cvs.style.cssText = "\
    position:fixed;\
    top:0px;\
    left:0px;\
    z-index:-1;\
    opacity:1.0;\
    ";
    document.body.appendChild(cvs);

    var ctx = cvs.getContext("2d");

    var startTime = new Date().getTime();

    //随机数函数
    function randomInt(min, max) {
        return Math.floor((max - min + 1) * Math.random() + min);
    }

    function randomFloat(min, max) {
        return (max - min) * Math.random() + min;
    }

    //构造点类
    function Point() {
        this.x = randomFloat(0, cvs.width);
        this.y = randomFloat(0, cvs.height);

        var speed = randomFloat(0.3, 1.4);
        var angle = randomFloat(0, 2 * Math.PI);

        this.dx = Math.sin(angle) * speed;
        this.dy = Math.cos(angle) * speed;

        this.r = 1.2;

        this.color = POINT_COLOR;
    }

    Point.prototype.move = function () {
        this.x += this.dx;
        if (this.x < 0) {
            this.x = 0;
            this.dx = -this.dx;
        } else if (this.x > cvs.width) {
            this.x = cvs.width;
            this.dx = -this.dx;
        }
        this.y += this.dy;
        if (this.y < 0) {
            this.y = 0;
            this.dy = -this.dy;
        } else if (this.y > cvs.height) {
            this.y = cvs.height;
            this.dy = -this.dy;
        }
    }

    Point.prototype.draw = function () {
        ctx.fillStyle = this.color;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();
    }

    var points = [];

    function initPoints(num) {
        for (var i = 0; i < num; ++i) {
            points.push(new Point());
        }
    }

    var p0 = new Point(); //鼠标
    p0.dx = p0.dy = 0;
    var degree = 2.5;
    document.onmousemove = function (ev) {
        p0.x = ev.clientX;
        p0.y = ev.clientY;
    }
    document.onmousedown = function (ev) {
        degree = 5.0;
        p0.x = ev.clientX;
        p0.y = ev.clientY;
    }
    document.onmouseup = function (ev) {
        degree = 2.5;
        p0.x = ev.clientX;
        p0.y = ev.clientY;
    }
    window.onmouseout = function () {
        p0.x = null;
        p0.y = null;
    }

    function drawLine(p1, p2, deg) {
        var dx = p1.x - p2.x;
        var dy = p1.y - p2.y;
        var dis2 = dx * dx + dy * dy;
        if (dis2 < 2 * LINE_LENGTH) {
            if (dis2 > LINE_LENGTH) {
                if (p1 === p0) {
                    p2.x += dx * 0.03;
                    p2.y += dy * 0.03;
                } else return;
            }
            var t = (1.05 - dis2 / LINE_LENGTH) * 0.2 * deg;
            ctx.strokeStyle = "rgba(255,255,255," + t + ")";
            ctx.beginPath();
            ctx.lineWidth = 1.5;
            ctx.moveTo(p1.x, p1.y);
            ctx.lineTo(p2.x, p2.y);
            ctx.closePath();
            ctx.stroke();
        }
        return;
    }

    //绘制每一帧
    function drawFrame() {
        cvs.width = window.innerWidth;
        cvs.height = window.innerHeight;
        ctx.fillStyle = BACKGROUND_COLOR;
        ctx.fillRect(0, 0, cvs.width, cvs.height);

        var arr = (p0.x == null ? points : [p0].concat(points));
        for (var i = 0; i < arr.length; ++i) {
            for (var j = i + 1; j < arr.length; ++j) {
                drawLine(arr[i], arr[j], 1.0);
            }
            arr[i].draw();
            arr[i].move();
        }

        window.requestAnimationFrame(drawFrame);
    }

    initPoints(POINT_NUM);
    drawFrame();
</script>
<script>
    function ds1(data){
        if (data.style.color==="red"){
            data.style.color="#fff"
        }else{

            data.style.color = "red";
        }
    }
    function ds2(data){
        if (data.style.color==="rgb(50, 205, 50)"){
            data.style.color="#fff"
        }else {
            data.style.color = "rgb(50, 205, 50)";
        }
    }
</script>
</body>
</html>